<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>编辑免票方案editFreeTicketPlan</title>
	</head>
	<link rel="stylesheet" href="../css/common.css" />
	<style>
		#box{
			margin-left:18px;
			margin-right:18px;
		}
		.title{
			height:40px;
			line-height:40px;
			font-weight:600;			
		}
		.title .quare{
			display:inline-block;
			width:4px;
			height:13px;
			background:#00aa98;
			vertical-align:middle;
			margin-right:8px;
		}
		.table1 tr td{
			height:44px;
			border:1px solid #e8e8e8;
		}
		.table1 input,select{
			width:100%;
			height:100%;
			border:none;
			outline:none;
			text-align:center;
		}
		.table1 tr .tableTitle{
			width:70px;
			background:#f1f1f1;
		}
		.table1 tr .tableContent{
			width:130px;
		}
		.strategy{
			background:#f1f1f1;
			border:1px solid #e7e7e7;
			margin-bottom:100px;
		}
		.strategy input[type=text]{
			width:95px;
			height:24px;
			border:1px solid #dadada;
			border-radius:1px;	
			text-align:center;					
		}
		.strategy input[type=radio]{
			position:relative;
			top:4px;
		}
		.strategy ul li>div{
			margin-left:10px;
			float:left;
		}
		.strategy ul li{
			margin:13px 0;
			overflow:hidden;
			line-height:26px;
		}
		.add{
			float:right;
			color:#f9a61a;
			cursor:pointer;
		}
		.btn{
			height:50px;
			background:white;
			position:fixed;
			bottom:0;
			text-align:center;
			width:100%;
		}
		.btn button{
			margin:0 20px;
			width:100px;
			height:28px;
			border-radius:2px;
			border:none;
			color:white;
			cursor:pointer;
		}
		.cancel{
			background:#909090;
		}
		.sure{
			background:#00aa98;
		}
		.readOnly{
			background:#f1f1f1;
		}
	</style>
	<body>
		<div id="box">
			<p class='title'><span><i class='quare'></i>适用日期</span></p>
			<table class="table1">
				<tr>
					<td class="tableTitle">方案编号</td>
					<td class="tableContent number"></td>
					<td class="tableTitle">方案类型</td>
					<td class="tableContent"><select class="type">
						<option value="QW">切位</option>
						<option value="SK">散客</option>
					</select></td>
					<td class="tableTitle">适用舱位</td>
					<td class="tableContent"><select class="cabin">
						<option value="Y">经济舱</option>
						<option value="F">头等舱</option>						
						<option value="C">商务舱</option>
					</select></td>
					<td class="tableTitle">状态</td>
					<td class="tableContent">已生效</td>
				</tr>
				<tr>
					<td class="tableTitle">创建人</td>
					<td class="tableContent"><input readonly class="creator" type="text" /></td>
					<td class="tableTitle">开始日期</td>
					<td class="tableContent"><input class='datespicker startDate' onFocus="new WdatePicker({dateFmt:'yyyy-MM-dd'})" type="text" /></td>
					<td class="tableTitle">结束日期</td>
					<td class="tableContent"><input class='datespicker endDate' onFocus="new WdatePicker({dateFmt:'yyyy-MM-dd'})" type="text" /></td>
					<td class="tableTitle"></td>
					<td class="tableContent"></td>
				</tr>
			</table>
			<p class='title'><span><i class='quare'></i>免票策略</span><span class="add">添加</span></p>
			<div class="strategy">
				<ul>
							
				</ul>
			</div>
			<div class="btn"><button class="sure">确认</button><button class="cancel">取消</button></div>
		</div>
	</body>
		<script type="text/javascript" src="../js/jquery-1.12.4.js" ></script>
		<script type="text/javascript" src="../layer-v2.4/layer/layer.js" ></script>
			<!-- 引入my97日期时间控件 -->
		<script type="text/javascript" src="../js/My97DatePicker/WdatePicker.js" charset="utf-8"></script>	
		<script type="text/javascript" src="../js/common.js" ></script>	
		<script>
			datadraw()//渲染数据
			$(".add").click(function(){	
				var length = $(".strategy ul li").length+1;
				var str =    '<li>'+
								'<div>全款座位数</div>'+
								'<div><input style="margin:0;" type="text" class="min"/> —&nbsp;</div>'+  
								'<div style="margin:0;"><input type="text" class="max"/></div>'+
								'<div>免票数</div>'+
								'<div><input free1 checked type="radio" name="free'+length+'" value="FREE"/></div>'+
								'<div><input free1Input type="text" class="freeCount"/></div>'+
								'<div><input free2 type="radio" name="free'+length+'" value="RATE"/></div>'+
								'<div>满<input free2Input style="margin:0;" type="text" readOnly class="readOnly rateCount" /> -&nbsp;</div>'+  
								'<div style="margin:0;"><input free2Input type="text" readOnly class="readOnly rateFree" /></div>'+
							'</li>'	
				$(".strategy ul").append(str);
			})
			//控制单选按钮
			$(".strategy").delegate("input[free1]","click",function(){								
				if($(this).is(":checked")){				
					$(this).parent().parent().find("input[free2Input]").prop("readOnly",true).addClass("readOnly");
					$(this).parent().parent().find("input[free1Input]").prop("readOnly",false).removeClass("readOnly");
				}
			})
			$(".strategy").delegate("input[free2]","click",function(){		
				if($(this).is(":checked")){				
					$(this).parent().parent().find("input[free1Input]").prop("readOnly",true).addClass("readOnly");
					$(this).parent().parent().find("input[free2Input]").prop("readOnly",false).removeClass("readOnly");
				}
			})
			//取消
			$(".cancel").click(function(){
				var index = parent.layer.getFrameIndex(window.name);//获取弹窗索引
				parent.layer.close(index);//关闭弹窗
			})
			//确定
			$(".sure").click(function(){
				var postData = {
						"number":$(".number").text(),
						"type":$(".type").val(),
						"cabin":$(".cabin").val(),
						"creator":$(".creator").val(),
						"startDate":$(".startDate").val(),
						"endDate":$(".endDate").val(),
						"freePolicy":[],
						"id":getHref().id
						
				};
				//获得免费策略中的多条数据
				(function(){
					var length = $(".strategy ul li").length;			
					for(var i=0;i<length;i++){	
						if(i==0){
							var json = {
									"min":$(".min").eq(i).val(),	
									"max":"500",
									"type":$(".strategy ul li").eq(i).find("input[type=radio]:checked").val()
								};
						}else{
							var json = {
									"min":$(".min").eq(i).val(),	
									"max":$(".max").eq(i).val(),
									"type":$(".strategy ul li").eq(i).find("input[type=radio]:checked").val()
								};
						}
						
						if(json.type=="FREE"){
							json.freeCount = $(".freeCount").eq(i).val();
						}else{						
							json.rateCount = $(".rateCount").eq(i).val();
							json.rateFree = $(".rateFree").eq(i).val();
						}
						postData.freePolicy.push(json);
					}					
				})()
				//加载层
				layer.load();
				//请求
				$.ajax({
					type:"post",
					url:"../farePlanFree/update?temp="+Math.random(),
					async:true,
					dataType:"json",
					contentType:'application/json;charset=utf-8',
					data:JSON.stringify(postData),
					success:function(data){
						layer.closeAll('loading');
						if(data.status=="1001"){
							layer.msg("免票方案修改成功", {icon: 1},function(){
								var index = parent.layer.getFrameIndex(window.name);//获取弹窗索引
								parent.layer.close(index);//关闭弹窗
							});
						}else{
							layer.msg(data.message, {icon: 2});
						}
					}			
				});	 
			})
			
			function datadraw(){
				var id = getHref().id;
				$.ajax({
					type:"get",
					url:"../farePlanFree/detail?id="+id+"&temp="+Math.random(),
					async:true,
					dataType:"json",
					success:function(data){
						if(data.status=="1001"){
							$(".number").text(data.data.number);//方案编号
							$(".type").val(data.data.type);
							$(".cabin").val(data.data.cabin);
							if(data.data.status=="VA"){
								$(".status").text("有效");
							}else{
								$(".status").text("无效");
							}							
							$(".creator").val(data.data.creator);
							$(".startDate").val(data.data.startDate);
							$(".endDate").val(data.data.endDate);
							$(data.data.freePolicy).each(function(index,item){
								add(index,item)
							})
						}else{
							layer.msg(data.message, {icon: 2});
						}
					}			
				});	 
			}
			function add(index,item){				
				var length = $(".strategy ul li").length+1;
				var max = item.max;
				if(index==0){
					max = "—"
					var str ='<li>'+
					'<div>全款座位数</div>'+
					'<div><input style="margin:0;" type="text" class="min" value='+item.min+'> —&nbsp;</div>'+  
					'<div style="margin:0;"><input type="text" class="max readOnly" value='+max+' readonly></div>'+
					'<div>免票数</div>'
				}else{
					var str ='<li>'+
					'<div>全款座位数</div>'+
					'<div><input style="margin:0;" type="text" class="min" value='+item.min+'> —&nbsp;</div>'+  
					'<div style="margin:0;"><input type="text" class="max" value='+max+'></div>'+
					'<div>免票数</div>'
				}
				
				if(item.type=="FREE"){
					str+='<div><input free1  type="radio" name="free'+length+'" value="FREE" checked/></div>'+
					'<div><input free1Input type="text" class="freeCount" value='+commomFun.toEmptyString(item.freeCount)+'></div>'
				}else{
					str+='<div><input free1  type="radio" name="free'+length+'" value="FREE" /></div>'+
					'<div><input free1Input type="text" class="freeCount readOnly" readonly value='+commomFun.toEmptyString(item.freeCount)+'></div>'
				}	
			   
				if(item.type=="RATE"){
					str+='<div><input free2 type="radio" name="free'+length+'" value="RATE" checked/></div>'+
					'<div>满<input free2Input style="margin:0;" type="text" class="rateCount" value='+commomFun.toEmptyString(item.rateCount)+'> -&nbsp;</div>'+  
					'<div style="margin:0;"><input free2Input type="text" class="rateFree" value='+commomFun.toEmptyString(item.rateFree)+'></div>'
				}else{
					str+='<div><input free2 type="radio" name="free'+length+'" value="RATE" /></div>'+
					'<div>满<input free2Input style="margin:0;" type="text" class="rateCount readOnly" readonly value='+commomFun.toEmptyString(item.rateCount)+'> -&nbsp;</div>'+  
					'<div style="margin:0;"><input free2Input type="text" class="rateFree readOnly" readonly value='+commomFun.toEmptyString(item.rateFree)+'></div>'
				}
				str+='</li>'	
				$(".strategy ul").append(str);
			}
		</script>
</html>
